<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>18watch监听深度监听</title>
  <style>
    #texts {
      width: 300px;
      height: 300px;
      box-sizing: border-box; /* 确保宽度和高度包括内边距和边框 */
      padding: 10px; /* 添加内边距 */
      margin: 0; /* 移除默认外边距 */
      border: 1px solid black; /* 添加边框 */
      vertical-align: top; /* 对齐顶部 */
    }

    p {
      width: 300px;
      height: 300px;
      background-color: rgb(137, 145, 152);
      display: inline-block;
      margin: 0; /* 移除默认外边距 */
      vertical-align: top; /* 对齐顶部 */
    }
  </style>
</head>
<body>

  <div id="app">
    翻译成的语言：<select v-model="obj.lang">
      <option value="en">英文</option>
      <option value="zh">中文</option>
      <option value="ru">俄语</option>
    </select>
    <br />
    <div>
      <textarea name="texts" id="texts" v-model="obj.words"></textarea>
      <p>{{exTexts}}</p>
    </div>
  </div>
  
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <script>

    const app =new Vue({
      el:'#app',
      data:{
          obj:{
            words:'早上好',
            lang:'en',
          },
          exTexts:'',
          timer:null,
      },
      methods:{

      },
      computed:{
      
      },
      watch:{
        //完整写法
        obj:{
          deep: true, //深度监听 开启监听
          immediate: true, // 一进入立即执行一次
          handler(newValue){
            // console.log('对象被修改了',newValue);
            clearTimeout(this.timer);
            this.timer =setTimeout(async()=>{
              const res = await axios({
              url: "http://localhost:8000/api/getTruncate",
              params: {
                q: this.obj.words,
                // from: "zh",
                to: this.obj.lang,
                // appid: "20240407002016340",
                // appid +q +salt +sign的md5
                // sign: CryptoJS.MD5(
                //   "20240407002016340" + newValue + salt + "qRTmxT3urB1kcrhGoh78"),
              },
            })
            console.log('res============>'+res);
            // if(res.data.trans_result ||res.data.trans_result.length === 0){
            //   alert('请求失败');
            //   return;
            // }
            // this.exTexts = res.data.trans_result[0].dst;
            let resJson = JSON.parse(res.data.obj);
            console.log(resJson.trans_result);
            this.exTexts =resJson.trans_result[0].dst;
            },1000)
          }
        }
      }
    })

    

  </script>
</body>
</html>